<script setup lang="ts">
import { onMounted, ref, nextTick, onUnmounted } from 'vue'
import { useRoute } from 'vue-router';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';
const route = useRoute();

const imgRef = ref<HTMLImageElement | null>(null); // 获取 <img> 元素的引用
const isLoading = ref(true);

onMounted(async () => {
  window.addEventListener('resize', handleResize);
  await nextTick(); // 确保 DOM 已更新
  if (imgRef.value?.complete) {
    onImageLoad(); // 如果图片已经加载完成，直接触发回调
  }
  //https://ai.wasu.cn:23001/chat/share?shareId=p8gqmoisc6ipqv3aecrfmjyq
})
// 图片加载完成后的回调函数
const onImageLoad = () => {
  if (imgRef.value) {
    targetHeight.value = `calc(100% + 57px - ${imgRef.value.offsetHeight}px - 20px)`;
    maskTop.value = `${imgRef.value.offsetHeight}px`;
    iframeTop.value = `calc(${imgRef.value.offsetHeight}px - 57px)`;
    const shareId = route.params.shareId;
    iframeSrc.value = `https://ai.wasu.cn:23001/chat/share?shareId=${shareId}`;
  }
  if(isLoading.value){
    setTimeout(() => {
      isLoading.value = false;
    }, 1000);
  }
};
const iframeRef = ref<HTMLElement | null>(null);
const targetHeight = ref('');
const maskTop = ref('');
const iframeTop = ref('');

const iframeSrc = ref('');

// 防抖函数
const debounce = (func: any, delay: any) => {
  let timeoutId: any;
  return function (this: any, ...args: any) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 更新屏幕宽度和计算值
const handleResize = debounce(() => {
  console.log('handleResize')
  onImageLoad();
  // screenWidth.value = window.innerWidth;
  // computedValue.value = screenWidth.value * 0.5; // 示例：计算值为屏幕宽度的一半
}, 200);
// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

</script>
<template>
  <Loading :active="isLoading" :is-full-page="true" />
  <main>
    <img id="banner-img" src="@/assets/banner2.png" alt="" ref="imgRef" @load="onImageLoad">
    <!-- <div class="mask-container" :style="{top:maskTop}">
      <div class="mask"></div>
    </div> -->
    <div class="mask-container2" :style="{height:maskTop}"></div>
    <iframe :src="iframeSrc" frameborder="0" ref="iframeRef" :style="{height:targetHeight,top:iframeTop}"></iframe>
    <footer>Lorem ipsum dolor sit amet consectetur adipisicing elit.</footer>
  </main>
</template>
<style scoped>
  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100vh;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* 适配安全区域 */
  }
  .mask-container{
    position: absolute;
    height: 46px;
    width: 100%;
  }
  .mask-container2{
    top:0;
    position: absolute;
    width: 100%;
    /** 
      0：水平偏移（h-offset），表示阴影不左右移动。

      10px：垂直偏移（v-offset），表示阴影向下移动 10px。

      10px：模糊半径（blur-radius），表示阴影的模糊程度。

      -5px：扩展半径（spread-radius），表示阴影向内收缩 5px。

      rgba(0, 0, 0, 0.5)：阴影颜色和透明度。
    */
    box-shadow: 0 10px 10px -3px rgba(0, 0, 0, 0.7);
    z-index:1;
  }
  .mask{
    width: 30%;
    height: 45px;
    float: right;
    background-color: rgb(251, 251, 252);;
  }
  img{
    width: 100%;
    height: auto;
    z-index:2;
    position: absolute;
    top: 0;
  }
  iframe{
    width: 100vw;
    /* position: relative; */
    /* top:-57px; */
    position: absolute;
  }
  footer{
    position: absolute;
    bottom:calc(10px + env(safe-area-inset-bottom)); /* 适配安全区域 */
    text-align: center;
    font-size:10px;
    height: 20px;
    color:gray
  }
</style>